Borde en imágenes a la carta

Vamos a quitar o mejor dicho conseguir que el borde que tenemos definido para las imágenes no salga siempre sino cuando nosotros queremos que salga porque a según que imágenes las afean bastante.

Cuando una imagen tiene borde o se lo hemos añadido con algún editor de imágenes va a resultar que al subirla desde una entrada nos mostrará entonces dos bordes, el que viene definido en los estilos y que le añadimos manualmente.

También es posible que la imagen tenga el mismo color de fondo que nuestro blog y si no le añadimos borde dará la impresión de estar más integrada.

La solución es crear una clase que la vamos a llamar "sinborde" y tendrá las propiedades necesarias para no mostrar el borde.

.post img.sinborde {
border:none !important;
padding:0 !important;
}

Esa parte la podemos añadir justo antes de ]]></b:skin> y donde vamos a mostrar la imagen añadimos el HTML

<img class="sinborde" src="url-imagen"/>

Añadir la url no quiere decir que tengamos que subir la imagen a un servidor externo, sino que la subimos en la misma entrada y una vez nos proporciona el código de la imagen lo desechamos todo menos la url de la imagen que la pegaremos en su lugar correspondiente "url-imagen"

Lo mismo ocurrirá si a una imagen concreta no deseamos añadir el mismo borde que al resto.

Creamos un borde especial como hicimos anteriormente y le damos distinto nombre a los estilos, de esa forma tendremos cualquier tipo de borde a mano porque sólo tendremos que copiar el HTML ya que los estilos se añaden una sola vez.